<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000000;
        }
        h1{
            text-align: center;
            font-size: 400px;
            color: orangered;
            /* color: royalblue; */
        }
        h2{
            text-align: center;
            font-size: 40px;
            color: #FEC007;
        }
        p{
            text-align: center;
            color: #673AB7;
            font-size: 40px;
        }
        u{
            color: chartreuse;
        }
        h3{
            text-align: center;
            font-size: 50px;
            color: #FE5722;
        }
        i{
            color: gold;
        }
</style>
</head>
<body>
    <h1></h1>
    <h2>按下开始</h2>
    <p>正确率：<u></u></p>
    <h3>你的级别：<i>操作一下？</i></h3>
</body>
</html>
<script>

    var h1 = document.querySelector('h1');
    var h2 = document.querySelector('h2');
    var u = document.querySelector('u');
    var i = document.querySelector('i')
    var zmcode;
    function showzm(){
        zmcode = 65+Math.floor(Math.random()*26);
        var zm = String.fromCharCode(zmcode);
        h1.innerHTML = zm;
    }
    //页面显示一个随机字母
    showzm();
    //正确的次数
    var zc = 0;
    //错误的次数
    var cw = 0;
    document.onkeydown = function(e){
        //获取事件对象
        e = e||window.event;
        //让字母随机颜色
        h1.style.color = '#'+ Math.random().toString(16).substr(-6);
        //测试用
        console.log(e.keyCode)
        console.log(zmcode)
        //如果按下的键code码和随机生成的code码一样就显示正确，并显示下一个字母
        if(e.keyCode == zmcode){
            zc ++;
            h2.innerText = 'true';
            showzm();
            u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'

        }else{
            cw ++;
            h2.innerText = 'false';
            h1.style.color = 'red';
            u.innerText = ((zc/(zc+cw))*100 ).toFixed(2) +'%'
        }
        //等级判断:正确率等于正确的次数除以(正确的次数加错误的次数)
        if((zc/(zc+cw))*100 > 99){
            i.innerHTML = '无敌'
        }
        else if((zc/(zc+cw))*100 > 95){
            i.innerHTML = '大神'
        }
        else if((zc/(zc+cw))*100 > 80){
            i.innerHTML = '就这？'
        }
        else if((zc/(zc+cw))*100 > 60){
            i.innerHTML = '也就一般。'
        }
        else{
            i.innerHTML = '太菜了还得多练练'
        }
    }
</script>